<template>
  <div class="advanced-attribute">
    <el-form>
      <el-form-item label="吸取材质对象">
        <div class="absorbMaterial">
          <div class="operate-icon" :class="status ? 'active' : ''" @click="straw">
            <SvgIcon icon-class="吸管" />
          </div>
          <span>{{ placeholder }}</span>
        </div>
      </el-form-item>
    </el-form>
    <el-form-item label="材质列表">
      <div class="line"></div>
      <div class="shrink-contain">
        <div :key="item.key" v-for="item in materialList">
          <div
            class="row-item selected"
            :class="selectedMaterial.key === item.key ? 'active' : ''"
            @click="selectMaterial(item)"
          >
            <SvgIcon icon-class="编组" class="material-icon" />
            <span>{{ item.label }}</span>
          </div>

          <Property
            :data="item.value"
            v-if="selectedMaterial.key === item.key"
            @handler="handler"
          />
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import Property from '../components/property.vue';
import { useSceneStore } from '@/store/scene';
import { cloneDeep } from 'lodash';

defineOptions({
  name: 'AdvancedAttribute',
});

const placeholder = ref('请选择物体吸取材质对象');
const materialList = ref<any[]>([]);
const selectedMaterial = ref<any>({});
const sceneStore = useSceneStore();
const status = ref(false);
const layer = sceneStore.selLayer;
const layerName = cloneDeep(layer.selLayer);
const obj = ref<any>(null);
const materialArr = ref([]);

const selectMaterial = (item: any) => {
  selectedMaterial.value = item;
};

const { cimInstance } = window;

document.addEventListener('contextmenu', () => {
  closeMouseIcon();
});

// 结束鼠标吸取状态
const closeMouseIcon = () => {
  status.value = false;
  sceneStore.mouseClass = '';
};

// 获取材质
const getGltfModelMaterial = (e: any) => {
  obj.value = e;
  if (status.value) {
    materialArr.value = cimInstance.api.getGltfModelPbrMaterial(e) || [];
  }
};

const changeMouseClass = (e: any) => {
  let selectId = e.clickObject?.id;
  // 改变鼠标样式
  if (status.value) {
    if (selectId) {
      sceneStore.mouseClass = 'selectable';
    } else {
      sceneStore.mouseClass = 'unselectable';
    }
  }
};

cimInstance.api.addLayerEventListener(layerName, 'mouse_mousemove', changeMouseClass);
cimInstance.eventApi.addEventListener('choose_gltf', getGltfModelMaterial);

const straw = () => {
  if (status.value) {
    closeMouseIcon();
    return;
  }
  sceneStore.mouseClass = 'select';
  status.value = true;
  // 添加gltf图层鼠标移入事件监听
};

function handler(item: any) {
  const pbrConfig: any = {
    object: obj.value,
    materialName: selectedMaterial.value.label,
  };
  pbrConfig[item.label] = item.value;
  console.log('----执行了-----', pbrConfig);
  cimInstance.api.updateLayerGraphics(obj.value.id, { pbrConfig });
}

onUnmounted(() => {
  closeMouseIcon();
  cimInstance.api.removeLayerEventListener(layerName, 'mouse_mousemove');
  cimInstance.eventApi.removeEventListener('choose_gltf');
});
watch(
  () => materialArr.value,
  () => {
    materialList.value = materialArr.value.map((ele: any = {}, index: number) => {
      let obj: any = {
        id: index,
        label: ele.name,
        value: [],
        key: Math.random().toString().split('.')[1],
      };
      for (let key in ele) {
        if (key !== 'name') {
          obj.value.push({
            label: key,
            value: ele[key],
          });
        }
      }
      return obj;
    });
    selectedMaterial.value = materialList.value.length > 0 ? materialList.value[0] : null;
    closeMouseIcon();
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.advanced-attribute {
  :deep(.el-form) {
    &-item {
      padding: 0 20px;
      display: block;

      .el-form-item__label {
        color: #ffffff;
      }
    }
  }

  .absorbMaterial {
    display: flex;
    align-items: center;

    .operate-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.18);
      border-radius: 4px;
      margin-right: 10px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      cursor: pointer;

      &.active {
        border-color: #0560fd;
      }
    }

    span {
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      color: #9a9a9a;
    }
  }

  .line {
    height: 1px;
    background: #1f2329;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 8px;
  }

  .shrink-contain {
    width: 100%;
  }

  .row-item {
    &.selected {
      height: 32px;
      cursor: pointer;
      margin-top: 10px !important;
      border: 1px solid #171a1f;
      display: flex;
      align-items: center;

      .material-icon {
        font-size: 20px;
        border-radius: 4px;
        margin-right: 6px;
      }

      &:hover {
        margin-left: -10px;
        margin-right: -10px;
        padding: 0 10px;
        background-color: rgba(5, 96, 253, 0.2);
        border-radius: 4px;
      }

      &.active {
        margin-left: -10px;
        margin-right: -10px;
        padding: 0 10px;
        background: rgba(5, 96, 253, 0.2);
        border-radius: 4px;
        border: 1px solid #0560fd;
      }
    }
  }
}
</style>
